/**
 * @class GDialog 继承于Panel，实现通用的Dialog功能。
 * 与core/panel/Dialog的区别是，后者为只适用于panel-t1模板，当前的可自定义模板
 */
define('core/panel/GDialog', ['jQuery', 'core/panel/Panel', 'core/panel/Mask'], function( require ){
	var $ = require('jQuery'),
		Panel = require('core/panel/Panel'),
		Mask = require('core/panel/Mask'),
		mix = K.mix,
		extend = K.extend,
		UA = K.Browser,
		CustEvent = K.CustEvent;

	var GDialog = extend( function( opts ){
		this._initDialog( opts );
	}, Panel );

	mix( GDialog.prototype, {
		/*
			可用的选项包括
			{
				top:		//坐标					(默认为0)
				left:		//坐标					(默认为0)
				height:		//高度					(默认为0)
				width:		//宽度					(默认为0)
				atCenter:	//是否居中				(默认为true)
				useIframe:	//是否使用iframe遮挡	(默认自动判断)
				useMask:	//是否使用遮罩			(默认使用)
				title:		//Dialog标题			(默认为空)
				className:	//Dialog样式名			(默认为panel-t1)
				content:	//Dialog内容			(默认为空)
				foot:		//Dialog底栏内容		(默认为空)
				maskClass:	//Mask样式				(默认为空)
				embedMask:	//是否将Panel嵌入Mask	(默认为否)
			}
		 */
		_initDialog: function( opts ){
			this.useMask = true;
			this.title = '';
			this.content = '';
			this.foot = '';
			this.className = 'panel-t1';

			mix( this, opts );

			GDialog.$super.call( this, opts );

			this.addClass( this.className );

			this._createDialog();

			if( this.useMask ){
				this._createMask();
			}

			this._bindEvents();

			if( this.title ){
				this.setTitle( this.title );
			}

			if( this.content ){
				this.setContent( this.content );
			}

			if( this.foot ){
				this.setFooter( this.foot );
			}
		},
		/*
		 * 创建Dialog结构
		 */
		/*
			<div class="panel panel-t1" style="top: 48px; left: 100px; width: 520px; height: 200px;">
				<div class="panel-content">
					<div class="hd">
						<h3></h3>
					</div>
					<div class="bd">
					</div>
					<div class="ft"></div>
				</div>
				<div class="sd">
				</div>
				<div class="close">×</div>
			</div>
		*/
		_createDialog: function(){
			var panel = this.getPanel();

			//创建内容区域
			this._hd = $('<div class="hd"/>');
			this._bd = $('<div class="bd"/>');
			this._ft = $('<div class="ft"/>');

			this.appendToContent( this._hd );
			this.appendToContent( this._bd );
			this.appendToContent( this._ft );

			//创建shadow
			this._sd = $('<div class="sd"/>');
			this.appendToPanel( this._sd );

			//创建close按钮
			this._close = $('<div class="close"></div>');
			this.appendToPanel( this._close );
		},
		/*
		 * 创建Mask
		 */
		_createMask: function(){
			var maskOpt = {};

			if( this.maskOption ){
				K.mix( maskOpt, this.maskOption );
			}

			this._mask = new Mask( maskOpt );
			this._mask.follow( this );

			if( this.embedMask ){
				this.getPanel().appendTo( this._mask.getPanel() );
			}
		},
		/*
		 * 绑定事件
		 */
		_bindEvents: function(){
			var ins = this;
			//Close
			this._close.click( function(){
				ins.hide();
			} );
		},
		/**
		 * 设置Dialog标题
		 * @param {String} title Dialog标题
		 */
		setTitle: function( title ){
			this._hd.html('<h3>' + title + '</h3>');
			return this;
		},
		/**
		 * 设置Dialog内容
		 * @param {String|Element} content Dialog内容;如果是字符串则直接当做内容，如果是元素则直接append。
		 */
		setContent: function( content ){
			if( $.type( content ) == 'string' ){
				this._bd.html( content );
			}
			else{
				this._bd.empty();
				this._bd.append( $(content) );
			}
		},
		/**
		 * 设置底栏内容
		 * @param {String} footer Dialog底栏内容
		 */
		setFooter: function( content ){
			this._ft.html( content );
		},
		getMask: function(){
			return this._mask;
		}
	} );

	return GDialog;
});
